<template>
    <div class="chart-wrap" style="height:100%;padding-top:40px;">
        <div class="count">
            <span>入园（人）<span class="blue">{{inNumber}}</span></span>
            <span style="margin-left: 20px;">出园（人）<span class="yellow">{{outNumber}}</span></span>
        </div>
        <div style="height:100%;" ref="chart"></div>
    </div>
</template>

<script>
import { defineComponent,ref,onMounted } from 'vue';
import * as echarts from 'echarts';
import Http from "../../util/http";
export default defineComponent({
    setup() {
        const chart = ref(null);
        /*const pDate= ref([])
        const pIn= ref([])
        const pOut= ref([])*/
        const fontColor = ref("#30eee9")
        const inNumber= ref(0)
        const outNumber= ref(0)
        onMounted(()=>{
            init()
            setInterval(() => {
                setTimeout(() => {
                    init()
                }, 0)
            }, 10000)

        })

        const init = ()=>{
            Http.getNumber().then(res => {
                if (res.data) {
                    inNumber.value = res.data.inNumber;
                    outNumber.value = res.data.outNumber;
                }
            });
            Http.getCarPeopleTj().then(res => {
                if (res.data) {
                    /*pDate.value = res.data.pDate;
                    pIn.value = res.data.pIn;
                    pOut.value = res.data.pOut;*/

                    var option ={
                        grid: {
                            left: '5%',
                            right: '10%',
                            top:'20%',
                            bottom: '5%',
                            containLabel: true
                        },
                        tooltip : {
                            show: true,
                            trigger: 'item'
                        },
                        legend: {
                            show:true,
                            x:'right',
                            y:'0',
                            itemWidth:10,
                            itemHeight:10,
                            textStyle:{
                                color:'#1bb4f6'
                            },
                            data:['入','出']
                        },
                        xAxis : [
                            {
                                type : 'category',
                                boundaryGap : false,
                                axisLabel:{
                                    color: fontColor.value
                                },
                                axisLine:{
                                    show:true,
                                    lineStyle:{
                                        color:'#397cbc'
                                    }
                                },
                                axisTick:{
                                    show:false,
                                },
                                splitLine:{
                                    show:false,
                                    lineStyle:{
                                        color:'#195384'
                                    }
                                },
                                data : res.data.pDate
                            }
                        ],
                        yAxis : [
                            {
                                type : 'value',
                                name : '单位：人',
                                min:0,
                                axisLabel : {
                                    formatter: '{value}',
                                    textStyle:{
                                        color:'#2ad1d2'
                                    }
                                },
                                axisLine:{
                                    lineStyle:{
                                        color:'#27b4c2'
                                    }
                                },
                                axisTick:{
                                    show:false,
                                },
                                splitLine:{
                                    show:true,
                                    lineStyle:{
                                        color:'#11366e'
                                    }
                                }
                            }
                        ],
                        series : [
                            {
                                name:'入',
                                type:'line',
                                stack: '总量',
                                symbol:'circle',
                                symbolSize: 8,
                                itemStyle: {
                                    normal: {
                                        color:'#0092f6',
                                        lineStyle: {
                                            color: "#0092f6",
                                            width:1
                                        },
                                        areaStyle: {
                                            //color: '#94C9EC'
                                            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                                offset: 0,
                                                color: 'rgba(7,44,90,0.3)'
                                            }, {
                                                offset: 1,
                                                color: 'rgba(0,146,246,0.9)'
                                            }]),
                                        }
                                    }
                                },
                                markPoint:{
                                    itemStyle:{
                                        normal:{
                                            color:'red'
                                        }
                                    }
                                },
                                data:res.data.pIn
                            },
                            {
                                name:'出',
                                type:'line',
                                stack: '总量',
                                symbol:'circle',
                                symbolSize: 8,

                                itemStyle: {
                                    normal: {
                                        color:'#00d4c7',
                                        lineStyle: {
                                            color: "#00d4c7",
                                            width:1
                                        },
                                        areaStyle: {
                                            //color: '#94C9EC'
                                            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                                offset: 0,
                                                color: 'rgba(7,44,90,0.3)'
                                            }, {
                                                offset: 1,
                                                color: 'rgba(0,212,199,0.9)'
                                            }]),
                                        }
                                    }
                                },
                                data:res.data.pOut
                            },
                        ]
                    };

                    var chartDom = echarts.init(chart.value);
                    chartDom.setOption(option)
                }
            });
        }
        return {
            chart,
            inNumber,
            outNumber
        }
    }
});
</script>

<style lang="scss" scoped>
.chart-wrap {
    position: relative;
    .count {
        height:40px;
        width:100%;
        position: absolute;
        top:0;
        left:0;
        font-size:12px;
        padding-left:20px;
        .blue {
            color:green;
            font-size:18px;
            font-weight: bold;
        }
        .yellow {
            color:yellow;
            font-size:18px;
            font-weight: bold;
        }
    }
}
</style>